<template>
  <el-container>
    <el-main>
      <el-breadcrumb separator-class="el-icon-arrow-right">
        <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
        <el-breadcrumb-item>结束会议</el-breadcrumb-item>
      </el-breadcrumb>
      <!--          搜索框-->
      <div style="padding: 10px 0">
        <el-input
                suffix-icon="el-icon-location-information"
                class="ml-5"
                style="width: 200px"
                placeholder="请输入开会的地点"
                v-model="address"
        ></el-input>
        <el-button class="ml-5" type="primary" @click="load"> 搜索</el-button>
        <el-button class="ml-5" type="warning" @click="clear"> 重置</el-button>
      </div>

      <!--   表单-->
      <div style="margin: 10px 0">

      </div>
      <el-table :data="tableData">
        <el-table-column prop="meetingId" label="会议Id" width="70">
        </el-table-column>
        <el-table-column prop="userId" label="会议发起人Id" width="110">
        </el-table-column>
        <el-table-column prop="state" v-model="state" label="会议状态" width="100">
        </el-table-column>
        <el-table-column prop="conferenceTheme" label="会议主题" width="160">
        </el-table-column>
        <el-table-column prop="contentDescription" label="会议内容" width="200">
        </el-table-column>
        <el-table-column prop="address" label="会议地址" width="130">
        </el-table-column>
        <el-table-column prop="startTime" label="会议开始时间" width="160">
        </el-table-column>
        <el-table-column prop="endTime" label="会议结束时间" width="160">
        </el-table-column>
        <!--      操作-->
        <el-table-column label="操作">
          <template slot-scope="scope">
            <el-popconfirm
                    class="ml-5"
                    confirm-button-text="确定"
                    cancel-button-text="我再想想!"
                    icon="el-icon-info"
                    icon-color="red"
                    title="确定结束吗？"
                    @confirm="quxiao(scope.row)">
              <el-button type="danger" slot="reference"
              >结束会议<i class="el-icon-remove-outline"></i
              ></el-button>
            </el-popconfirm>
          </template>
        </el-table-column>
      </el-table>

      <div style="padding: 10px 0">
        <!--            分页插件的基本参数-->
        <el-pagination
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :current-page="pageNum"
                :page-sizes="[5, 10, 15, 20]"
                :page-size="pageSize"
                layout="total, sizes, prev, pager, next, jumper"
                :total="total"
        >
        </el-pagination>
      </div>
    </el-main>
  </el-container>
</template>
<script>
  import request from "../../utils/request";
  export default {
    name: "EndMeeting",
    data() {
      return {
        //表格数据
        tableData: [],
        //分页数据
        total:0,
        pageNum:1,
        pageSize:5,
        //对搜索框参数的数据绑定
        userName:"",
        address:"",
        state:"",
        form:{},
        meta: {
          requireAuth: true
        }
      }
    },
    created() {
      //调用请求的方法
      this.load();
    },

    methods:{
      //结束的方法
      quxiao(row){
        this.form = row;
        //改变state的值
        this.form.state = '已结束';
        request.post("meeting/MyUpdate",this.form).then(res =>{
          //如果取消成功
          if (res){
            //成功
            this.$message.success("会议已经结束,签到暂停!");
            //刷新
            this.load();
          }else {
            this.$message.error("失败!");
          }
        })
      },
      //封装请求的方法
      load(){
        request.get("meeting/findPage2",{
          params: {
            pageNum : this.pageNum,
            pageSize : this.pageSize,
            user_name : this.userName,
            address : this.address,
            state : '进行中'
          }
        }).then(res=>{
          //把传回来的值给tableData
          this.tableData = res.records;
          //total
          this.total = res.total;
        })
      },
      //当改变分页参数
      handleSizeChange(pageSize){
        this.pageSize = pageSize;
        //参数改变以后重新调用请求的方法
        this.load();
      },
      handleCurrentChange(pageNum){
        this.pageNum = pageNum;
        //参数发生改变以后重新请求方法
        this.load();
      },
      //清空表单数据
      clear(){
        this.address="";
        //刷新
        this.load()
      }
    }
  };
</script>
<style scoped lang="less">
</style>
